import React, { useState, useEffect, useRef } from 'react'
import {
    Button,
    Form,
    Input,
    Select,
    Col,
    Row,
    Tooltip,
    Table,
    Pagination,
    Modal,
    Radio,
    message,
    Upload,
} from 'antd'
import {
    SyncOutlined,
    SearchOutlined,
    PlusOutlined,
    EditOutlined,
    DeleteOutlined,
    ExclamationCircleOutlined,
    VerticalAlignBottomOutlined,
    InboxOutlined,
} from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table'
import {
    getListAPI,
    delAPI,
    getDetailAPI,
    addAPI,
    putAPI,
    uploadIniAPI,
} from '@/api/modules/equipment/uploadIni'
import { getDictsApi } from '@/api/modules/system/dictData'
import { download } from '@/api'
import { pageDelJump } from '@/utils'
import { IType, IDetailType } from '@/type/modules/equipment/uploadIni'
import ColorBtn from '@/components/ColorBtn'
import { hasPermi } from '@/utils/auth'
import { IdictType } from '@/type/modules/system/sysDictData'

const { Dragger } = Upload;

const EquipmentEquipmentupload = () => {
    const [queryForm] = Form.useForm()
    const [addEditForm] = Form.useForm()
    const { confirm } = Modal
    // 分页
    const [queryParams, setQueryParams] = useState<IType>({ pageNum: 1, pageSize: 10 })
    // 列表数据
    const [dataList, setDataList] = useState({ count: 0, rows: [] as IDetailType[] })
    // table loading
    const [loading, setLoading] = useState(true)
    // 新增编辑 model显隐
    const [isModalOpen, setIsModalOpen] = useState(false)
    // 新增编辑判断
    const [isAdd, setIsAdd] = useState(true)
    // 非单个禁用
    const [single, setSingle] = useState(true)
    // 非多个禁用
    const [multiple, setMultiple] = useState(true)
    // 保存table 选择的key
    const [selectKeys, setSelectKeys] = useState<React.Key[]>([])
    //  table 后台使用的key
    const [rowKeys, setRowKeys] = useState('')
    // 控制搜索隐藏显示
    const [searchShow, setSearchShow] = useState(true)
    // 当前编辑的id
    const [currentId, setCurrentId] = useState<number>()
    // 文件上传
    const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
    // 文件上传 判断是否更新用户数据
    const [isUpdateSupport, setIsUpdateSupport] = useState('0');
    // 存储已上传的文件
    const [isFiles, setIsFiles] = useState<UploadFile<any>[]>([]);
    useEffect(() => {
        try {
            const getDictsFn = async () => {
            }
            getDictsFn()
        } catch (error) { }
    }, [])
    // excel 导入
    const props: UploadProps = {
        name: 'file',
        multiple: true,
        accept: '.ini',
        fileList: isFiles,
        beforeUpload: () => false,
        onChange: (info) => {
            setIsFiles(info.fileList);
        },
    };
    const handleUploadOk = async () => {
        try {
            const fd = new FormData();
            fd.append('updateSupport', isUpdateSupport);
            isFiles.forEach((file: any) => {
                fd.append('iniFiles', file.originFileObj);
            });
            const { data } = await uploadIniAPI(fd);
            message.success(data.message);
            setIsUploadModalOpen(false);
            setIsUpdateSupport('0');
            setIsFiles([]);
            getList()
        } catch (error) { }
    };
    const handleUploadCancel = () => {
        setIsUploadModalOpen(false);
        setIsFiles([]);
        setIsUpdateSupport('0');
    };
    // 查询列表
    const getList = async () => {
        try {
            const { data } = await getListAPI(queryParams)
            setDataList({ ...data.result })

            message.success('查询成功')
            setLoading(false)
        } catch (error) { }
    }


    useEffect(() => {
        getList()
    }, [queryParams])

    // 搜索
    const searchQueryFn = () => {
        const form = queryForm.getFieldsValue()
        setQueryParams({
            pageNum: 1,
            pageSize: 10,
            ...form,
        })
    }

    // 重置
    const resetQueryFn = () => {
        queryForm.resetFields()
        setSelectKeys([])
        setQueryParams({ pageNum: 1, pageSize: 10 })
    }

    // row-select
    const rowSelection = {
        selectedRowKeys: selectKeys,
        onChange: (selectedRowKeys: React.Key[]) => {
            if (!selectedRowKeys.length || selectedRowKeys.length > 1) {
                setSingle(true)
            } else {
                setSingle(false)
            }
            selectedRowKeys.length ? setMultiple(false) : setMultiple(true)
            setSelectKeys(selectedRowKeys)
            setRowKeys(selectedRowKeys.join(','))
        },
    }

    // 获取详情
    const handleEditForm = async (id: number) => {
        try {
            const { data } = await getDetailAPI(id)
            setCurrentId(id)
            setIsModalOpen(true)
            setIsAdd(false)
            addEditForm.setFieldsValue(data.result as unknown as IDetailType)
        } catch (error) { }
    }

    // 表单提交
    const handleFormFinish = async (values: IDetailType) => {
        try {
            if (isAdd) {
                await addAPI({ ...values })
                message.success('新增成功')
            } else {
                await putAPI({ ...values, tableId: currentId })
                message.success('修改成功')
            }

        } catch (error) { }
        setIsModalOpen(false)
        addEditForm.resetFields()
        getList()
    }

    // 分页
    const onPagChange = async (pageNum: number, pageSize: number) => {
        setQueryParams({ pageNum, pageSize })
    }

    // 删除
    const delFn = (ids: string) => {
        confirm({
            icon: <ExclamationCircleOutlined />,
            content: `是否确认删除编号为"${ids}"的数据项？`,
            centered: true,
            async onOk() {
                try {
                    const { data } = await delAPI(ids)
                    message.success(data.message)
                    pageDelJump(dataList.count, ids, queryParams, setQueryParams)
                } catch (error) { }
            },
        })
    }

    // table
    const columns = [
        {
            title: '编码',
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            render: (text, record, index) => index + 1, // 渲染序号
        },
        {
            title: '名称',
            dataIndex: 'index',
            key: 'originalFilename',
            align: 'center',
            render: (text, record, index) => record.originalFilename, // 渲染序号
        },
        {
            title: '操作',
            key: 'operation',
            align: 'center',
            fixed: 'right',
            render: (_: any, record: IDetailType) => (
                <div>
                    <Button
                        hidden={hasPermi('::edit')}
                        onClick={() => handleEditForm(record.tableId as number)}
                        size="small"
                        icon={<EditOutlined />}
                        type="link"
                    >
                        修改
                    </Button>
                    <Button
                        hidden={hasPermi('::remove')}
                        size="small"
                        icon={<DeleteOutlined />}
                        type="link"
                        onClick={() => delFn(String(record.tableId))}
                    >
                        删除
                    </Button>
                </div>
            ),
        },
    ] as ColumnsType<IDetailType>

    // table 数据源
    const tableData = dataList.rows

    return (
        <div className="app-container">
            <Row gutter={16}>
                <Col span={24}>
                    <Form
                        form={queryForm}
                        hidden={!searchShow}
                        layout="inline"
                        className="leno-search"
                    >

                        <Form.Item>
                            <Button onClick={searchQueryFn} type="primary" icon={<SearchOutlined />}>
                                搜索
                            </Button>
                        </Form.Item>
                        <Form.Item>
                            <Button onClick={resetQueryFn} icon={<SyncOutlined />}>
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                    <Row gutter={16} className="mb10">
                        <Col span={16} className="leno-btn">
                            <Row gutter={8}>
                                <Col>
                                    <ColorBtn
                                        hidden={false}
                                        color="info"
                                        // icon={<ToTopOutlined />}
                                        onClick={() => {
                                            setIsUploadModalOpen(true);
                                        }}
                                    >
                                        导入
                                    </ColorBtn>
                                </Col>
                                <Col>
                                    <ColorBtn
                                        hidden={hasPermi('::add')}
                                        icon={<PlusOutlined />}
                                        onClick={() => {
                                            setIsModalOpen(true)
                                            setIsAdd(true)
                                        }}
                                    >
                                        新增
                                    </ColorBtn>
                                </Col>
                                <Col>
                                    <ColorBtn
                                        hidden={hasPermi('::edit')}
                                        disabled={single}
                                        color="success"
                                        icon={<EditOutlined />}
                                        onClick={() => handleEditForm(Number(rowKeys))}
                                    >
                                        修改
                                    </ColorBtn>
                                </Col>
                                <Col>
                                    <ColorBtn
                                        hidden={hasPermi('::remove')}
                                        onClick={() => delFn(rowKeys)}
                                        disabled={multiple}
                                        color="danger"
                                        icon={<DeleteOutlined />}
                                    >
                                        删除
                                    </ColorBtn>
                                </Col>
                                <Col>
                                    <ColorBtn
                                        hidden={hasPermi('::export')}
                                        color="warning"
                                        icon={<VerticalAlignBottomOutlined />}
                                        onClick={() => download('/equipment/uploadini/export')}
                                    >
                                        导出
                                    </ColorBtn>
                                </Col>
                            </Row>
                        </Col>
                        <Col span={8}>
                            <Row gutter={8} justify="end">
                                <Col>
                                    <Tooltip placement="top" title={searchShow ? '隐藏搜索' : '显示搜索'}>
                                        <Button
                                            shape="circle"
                                            icon={<SearchOutlined />}
                                            onClick={() => {
                                                setSearchShow(!searchShow)
                                            }}
                                        />
                                    </Tooltip>
                                </Col>
                                <Col>
                                    <Tooltip placement="top" title="刷新">
                                        <Button
                                            shape="circle"
                                            icon={<SyncOutlined />}
                                            onClick={() => {
                                                searchQueryFn()
                                                setSelectKeys([])
                                            }}
                                        />
                                    </Tooltip>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                    <div className="leno-table">
                        <Table
                            columns={columns}
                            dataSource={tableData}
                            pagination={false}
                            rowKey="tableId"
                            size="middle"
                            loading={loading}
                            
                        />
                        <Pagination
                            className="pagination"
                            onChange={onPagChange}
                            total={dataList.count}
                            showSizeChanger
                            showQuickJumper
                            current={queryParams.pageNum}
                            showTotal={(total) => `共 ${total} 条`}
                        />

                    </div>

                    {/* 添加 编辑 */}
                    <Modal
                        title={isAdd ? '添加' : '编辑'}
                        open={isModalOpen}
                        onOk={() => addEditForm.submit()}
                        onCancel={() => {
                            setIsModalOpen(false)

                            addEditForm.resetFields()
                        }}
                    >
                        <Form
                            form={addEditForm}
                            labelCol={{ span: 5 }}
                            onFinish={handleFormFinish}
                        >

                        </Form>
                    </Modal>
                    <Modal title="用户导入" open={isUploadModalOpen} onOk={handleUploadOk} onCancel={handleUploadCancel}>
                        <Dragger {...props} height={200}>
                            <p className="ant-upload-drag-icon">
                                <InboxOutlined />
                            </p>
                            <p className="ant-upload-text">将文件拖到此处，或点击上传</p>
                        </Dragger>
                        <Row justify="center" align="middle" style={{ fontSize: 12, color: '#808080' }}>
                            支持单文件、多文件上传
                        </Row>
                    </Modal>
                </Col>
            </Row>
        </div>
    )
}

export default EquipmentEquipmentupload